<!--
 * @Description: 检测查询页面
-->
<template>
  <BaseMainSlot :show-btn-box="false">
    <template v-slot:search-box>
      <SearchForm :formConfig="formConfig" :formData="searchlist" @search="search"></SearchForm>
    </template>
    <template v-slot:table-box>
      <div class="detection-query">
        <el-carousel type="card" arrow="always" indicator-position="none" :autoplay="false">
          <!-- <button
            type="button"
            class="el-carousel__arrow el-carousel__arrow--left"
            @click="todelcilck"
          >
            <i class="el-icon-arrow-left"></i>
          </button>
          <button
            type="button"
            class="el-carousel__arrow el-carousel__arrow--right"
            @click="toIncilck"
          >
            <i class="el-icon-arrow-right"></i>
          </button>-->
          <el-carousel-item v-for="(items, index) in tableList" :key="index">
            <div class="medium">
              <div slot="header" class="clearfix">
                <div class="label-input">
                  <div class="label">检测品质类型:</div>
                  <div>{{ items.detectionTypeName }}</div>
                </div>
                <div class="label-input">
                  <div class="label">批次名称:</div>
                  <div>{{ items.batchName }}</div>
                </div>
                <!-- <div class="label-input">
                  <div class="label">种植户:</div>
                  <div>{{ items.lesseeName }}</div>
                </div>-->
                <div class="label-input">
                  <div class="label">检测时间:</div>
                  <div>{{ dateFormat(items) }}</div>
                </div>
              </div>
              <div class="text item">
                <!-- <img class="img" :src="items.pictureUtl" alt /> -->
                <el-image :src="items.pictureUtl" :preview-src-list="[items.pictureUtl]">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </template>
  </BaseMainSlot>
</template>

<script>
import { mymixin } from "@/utils/mixin";
import DetectionQuery from "@/api/digital-operation/detection-manage-ment/detection-query";
// import collectionPicture from "@/api/digital-production/collectionPicture";
// import equipMentManage from "@/api/digital-operation/task-manage/agricultural-work";
import TenantManage from "@/api/digital-operation/tenant-manage/tenant-info";
import detectionTypeManage from "@/api/digital-operation/detection-manage-ment/detection-type-manage/index";
import SearchForm from '@/components/searchForm';
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
export default {
  name: "DetectionQuery",
  components: { SearchForm, BaseMainSlot },
  mixins: [mymixin],
  data() {
    return {
      formConfig: [
        {
          label: '批次选择',
          prop: 'productionBatchNo',
          type: 'select',
          options: [], // warehouseBatchArrAll
          optionKey: { label: 'batchName', value: 'batchNo' },
        }, {
          label: '种植户选择',
          prop: 'lesseeNo',
          type: 'select',
          options: [], // LessesData
          optionKey: { label: 'lesseeName', value: 'lesseeNo' },
        }, {
          label: '检测类型',
          prop: 'detectionTypeNo',
          type: 'select',
          options: [], // treeData
          optionKey: { label: 'detectionTypeName', value: 'detectionTypeNo' },
        },
      ],
      searchlist: {},
      currentPage: 1,
      // 每页的数据条数
      pageSize: 3,
      // 总条数
      totalSize: 0,
      tableList: [{}],
      detectionTypeNo: "",
      treeData: [],
      productionBatchNo: "",
      warehouseBatchArrAll: [],
      lesseeNo: undefined,
      LessesData: []
    };
  },
  created() {
    this.queryDataList();
  },
  mounted() {
    this.getTableDataList();
  },
  methods: {
    getTableDataList() {
      let params = {
        // page: this.currentPage,
        // size: this.pageSize,
        // entity: {
        detectionTypeNo: this.searchlist.detectionTypeNo || undefined,
        lesseeNo: this.searchlist.lesseeNo || undefined,
        productionBatchNo: this.searchlist.productionBatchNo || undefined,
        organizationNo: sessionStorage.organizationNo
        // }
      };
      DetectionQuery.queryDeteionNange(params).then(res => {
        let data = res.data;
        if (data) {
          this.totalSize = data.totalElements;
          this.tableData = data;
          this.getpiclist();
        }
      });
    },
    async queryDataList() {
      // 查询仓库映射表数据
      const { data: resp } = await DetectionQuery.querybylist({simpleData: true});
      // console.log(resp)
      this.warehouseBatchArrAll = resp;
      this.setOptions(this.formConfig, 'productionBatchNo', resp)
      // 检测类型
      const {
        data: detectionType
      } = await detectionTypeManage.getTreequeryByCondition();
      this.treeData = detectionType;
      this.setOptions(this.formConfig, 'detectionTypeNo', detectionType)
      // // 种植户名称获取
      const { data: Lesses } = await TenantManage.queryLessesByCondition(1);
      this.LessesData = Lesses;
      this.setOptions(this.formConfig, 'lesseeNo', Lesses)
    },
    getpiclist() {
      // console.log('11')
      this.tableData.forEach(item => {
        if (item.pictureId) {
          DetectionQuery.getColectPicture(item.pictureId).then(res => {
            let data = res.data;

            let pictureUtl = "data:image/png;base64," + data.data;
            this.$set(item, "pictureUtl", pictureUtl);
          });
        }
      });
      setTimeout(() => {
        if (this.tableData.length > 0) {
          this.tableList = this.tableData;
        } else {
          this.tableList = [
            {
              detectionTypeName: "优",
              batchName: "001批次",
              detectionTime: new Date(),
              pictureUtl: "data:image/png;base64,"
            }
          ];
        }
      }, 200);
    },
    // 整页 跑马灯切换
    // todelcilck() {
    //   if (this.currentPage > 1) {
    //     this.currentPage = this.currentPage - 1;
    //     // console.log(this.currentPage)
    //     this.getTableDataList();
    //   } else {
    //     return this.$message.warning("当前页数为1");
    //   }
    // },
    // toIncilck() {
    //   this.currentPage = this.currentPage + 1;
    //   // console.log(this.tableData)
    //   let params = {
    //     page: this.currentPage,
    //     size: this.pageSize
    //   };
    //   DetectionQuery.postDeteionNange(params).then(res => {
    //     let data = res.data;
    //     this.totalSize = data.totalElements;
    //     this.tableData = data.content;
    //     if (this.tableData.length === 0) {
    //       // console.log("! ")
    //       this.currentPage = this.currentPage - 1;
    //       // console.log(this.currentPage)
    //       this.getTableDataList();
    //       this.$message.warning("已经没有更多页了");
    //     }
    //     this.getpiclist();
    //   });

    //   // console.log(this.currentPage)
    // },
    dateFormat(row) {
      if (row.detectionTime) {
        return this.$moment(row["detectionTime"]).format("YYYY-MM-DD HH:mm:ss");
      }
    },
    search() {
      this.currentPage = 1;
      this.getTableDataList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.detection-query {
  height: 100%;
  width: 100%;
  position: relative;
  padding-left: 6%;
  .el-carousel__item h3 {
    color: #475669;
    font-size: 0.875rem;
    opacity: 0.75;
    line-height: 12.5rem;
    margin: 0;
  }
  .el-carousel--horizontal {
    height: 100%;
  }
  ::v-deep .el-carousel__container {
    position: relative;
    height: 100%;
    left: 2%;
  }
  // .el-carousel__mask{
  //   width: 30%;
  // }
  .el-carousel__item--card {
    width: 40%;
  }
  .medium {
    padding: 0 1.25rem;
    padding-top: 1.25rem;
    width: 75%;
    height: 100%;
    margin: 0 auto !important;
    border: 0.0625rem solid #037a98;
    // background-color: #d3dce6;
    .clearfix {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      margin: 0 0 0.625rem 0;
      .label-input {
        display: flex;
        align-items: center;
        padding: 0.125rem 0;
        .input {
          .el-input {
            width: 18.75rem;
          }
        }
        div {
          font-size: 1rem;
        }
        .label {
          // width: 6.25rem;
          font-size: 1rem;
          // font-size: .625rem;
          margin-right: 0.625rem;
          white-space: nowrap;
        }
      }
    }
    .text {
      padding: 0.25rem;
      height: 80%;
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: center;
      .img {
        width: 100%;
        height: 100%;
      }
      ::v-deep .el-image {
        width: auto;
        height: auto;
        max-height: 100%;
        max-width: 100%;
        .el-icon-picture-outline {
          font-size: 6.25rem;
        }
      }
      &:not(:last-child) {
        margin-right: 1.875rem;
      }
    }
  }
  ::v-deep .el-carousel__item--card.is-active {
    z-index: 5 !important;
  }
  ::v-deep .el-carousel__mask {
    background-color: #0000;
  }
  .el-carousel__item:nth-child(2n) {
    .el-carousel__mask {
      background-color: #99a9bf;
    }
  }
  ::v-deep .el-carousel__indicators {
    display: none;
  }
  .el-carousel__item:nth-child(2n + 1) {
    .el-carousel__mask {
      background-color: #d3dce6;
    }
  }
}
// ::v-deep .el-carousel__arrow--left {
//   // margin-left: -100% !important;
// }
// ::v-deep .el-carousel__arrow--right {
//   // margin-right: -100% !important;
// }
::v-deep .el-carousel__arrow--left {
  top: 48.5%;
  margin-left: -2.5% !important;
  background-color: #fff0;
}
::v-deep .el-carousel__arrow--right {
  top: 48.5%;
  background-color: #fff0;
  margin-right: 8% !important;
}
::v-deep .el-icon-arrow-left {
  font-size: 3.125rem;
}
::v-deep .el-icon-arrow-right {
  font-size: 3.125rem;
}
// 跑马灯 过渡
::v-deep .el-carousel__item.is-in-stage {
  opacity: 1;
}
::v-deep .el-carousel__item {
  opacity: 0;
  transition: 0.5s;
}
::v-deep .el-image-viewer__wrapper {
  position: fixed;
  top: 0vh;
  right: 0;
  bottom: 0;
  left: 0vw;
  // overflow: hidden;
  // height: 89vh;
}
</style>
